import { Form, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import ManageOptions from './components/ManageOptions';
import styles from "./style.less";
import MOTable from './components/MOTable';
import MOOptions from './components/MOOptions';
import ModalForm from './components/ModalForm';
import Details from './components/Details';
import UpdateForm from './components/UpdateForm';
import LogsInfo from '@/pages/BaseComponents/LogsInfo';

const MODetails = Details;
const MOUpdate = UpdateForm;

const ManagerCnter = props => {

    const { isOpts, currentPage, dispatch, MARK } = props;
    const [configs, setConfigs] = useState({ HEADER_OPTS: {}, MODAL_CFGS: {}, DETAIL_ARGS: {},})
    const DETAIL_MSG = '请在配置文件中添加DETAIL_ARGS信息。';

    const renderHtml = () => {
        if (currentPage) {
            switch (currentPage) {
                case 'update':
                    return configs.DETAIL_ARGS ? <MOUpdate detailArgs={configs.DETAIL_ARGS} {...props} /> : DETAIL_MSG;
                case 'logging':
                    return <LogsInfo />
                    
                default:
                    return configs.DETAIL_ARGS ? <MODetails detailArgs={configs.DETAIL_ARGS} {...props} /> : DETAIL_MSG;
            }
        }
        else if (isOpts) {
            return <ManageOptions {...props}/>
        }
        else if (!isOpts) {

            return (
                <>  
                {
                    configs.HEADER_OPTS &&
                    Object.keys(configs.HEADER_OPTS).length > 0 &&
                    <MOOptions
                        className={styles}
                        headerOpts={configs.HEADER_OPTS}
                        {...props}
                    />
                }
                {
                    configs.TABLE_COLS && 
                    Object.keys(configs.TABLE_COLS).length > 0 &&
                    <MOTable
                        className={styles.moTable}
                        MOtableCols={configs.TABLE_COLS}
                        {...props}
                    />
                } 
                {
                    configs.MODAL_CFGS &&
                    Object.keys(configs.MODAL_CFGS).length > 0 &&
                    <ModalForm
                        modalCfgs={configs.MODAL_CFGS}
                        // onCancel={}
                        {...props}
                    />
                }
                </>
            )
        }
    }

    useEffect(() =>{
        MARK && 
        import(`./configs/${MARK}`)
            .then(content => {
                // console.log('==>> content', content, Object.keys(content))
                Object.keys(content).length && setConfigs(content);
            })
        
    }, [MARK])

    return (
        <>
            <Button onClick={() => {
                dispatch({
                    type: 'manager/updateOpts'
                })
            }}>To Center</Button>

            {renderHtml()}
        </>
    );
}

export default connect(({ manager, global }) => ({
    ...manager,
    isMobile: global.isMobile,
}))(Form.create()(ManagerCnter)); 
